<template>
    <div class="wh-100">
        <div class="w-100 h-10 d-flex-align-center bor-base-b">
            <div style="font-weight: bold" class="ml-20">消息通知</div>
            <p style="font-size: 10px; color: #c7c6c6" class="mr-auto px-8">仅保留近3个月收到的通知</p>
            <Select onchange="" v-model="model1" style="width: 200px">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
        </div>
        <div class="w-100 h-80 my-auto px-24">
            <div v-for="(item, index) in data" :key="index" class="bor-base-b px-16">
                <div style="font-size: 12px; font-weight: bold" class="pt-8">{{ item.title }}</div>
                <div style="font-size: 10px" class="pt-8 pb-8">{{ item.content }}</div>
            </div>
        </div>
        <div class="bor-base-t w-100 h-10 d-flex-align-center">
            <Page show-sizer :total="Number(data.length)" show-elevator />
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [
                { id: 1, title: '双选会报名成功', content: '双选会报名成功，请2023年11月23日 10：00 准时参加，活动地址：郑州大学 体育馆 展位号10号！' },
                { id: 2, title: '资质审核通过', content: '列表内容内容内容内容内容内容内容内容列表内容内容内容内容内容内容内容内容列表内容' },
                { id: 3, title: '收到某职位的投递简历', content: '列表内容内容内容内容内容内容内容内容列表内容内容内容内容内容内容内容内容列表内容' },
                { id: 1, title: '收到解约信息', content: '列表内容内容内容内容内容内容内容内容列表内容内容内容内容内容内容内容内容列表内容' },
                { id: 2, title: '签约信息审核通过', content: '列表内容内容内容内容内容内容内容内容列表内容内容内容内容内容内容内容内容列表内容' },
                { id: 3, title: '职位审核通过', content: '列表内容内容内容内容内容内容内容内容列表内容内容内容内容内容内容内容内容列表内容' }
                // 更多数据项...
            ],
            cityList: [
                {
                    value: 'all',
                    label: '全部'
                },
                {
                    value: 'systemNotification',
                    label: '系统通知'
                },
                {
                    value: 'resumeDelivery',
                    label: '简历投递'
                },
                {
                    value: 'reviewInformation',
                    label: '审核信息'
                }
            ],
            model1: 'all'
        };
    },
    watch: {},
    methods: {}
};
</script>
